残像を残しながら画像を自動的に切り替える
今回の講座は、前回紹介した『残像を残しながら別の画像に切り替える』の応用テクニックです。今回は、ボタンをクリックしなくても自動的に画像を切り替える方法を紹介します。少しだけJavaScriptが長くなりますが、ぜひともチャレンジしてみてください。

→ 画像の表示領域を確保する
 
今回も前回と同様に、画像を表示するための領域を確保します。id属性でIMGタグ自体に名前を付けておくようにしてください（今回の例では「imgframe」という名前を付けました）。また、画像の切り替えには「filter:blendTrans」を使用するので、これをstyle属性であらかじめ指定しておきます。そのほか、BODYタグにonLoadイベントを追加し、自作のJavaScript関数「imgchange()」を自動的に呼び出すようにしておきます。
<BODY bgcolor="#000000" onLoad="imgchange()">
　　：
　　：
<IMG src='img01.jpg' id="imgframe" style="filter:blendTrans">
　　：
　　：
</BODY>


→ JavaScriptの変数を定義する
 
続いては、JavaScriptで使用する変数を定義します。まず変数timeですが、これは前回と同様に、画像の切り替えに要する時間（秒）の設定となります。次の変数rtimeには、画像が切り替わる間隔を設定します。こちらは1/1000秒単位の指定となり、たとえば10秒を指定する場合は10000を代入します。さらに、画像ファイル名を代入する配列imageを定義しておきます。今回は3つの画像を繰り返し表示させるので、image[0]〜image[2]のそれぞれに、'img01.jpg'〜'img03.jpg'を代入しました。最後の変数iは、自作のJavaScript関数「imgchange()」で利用する変数となります。
<SCRIPT language="JavaScript">
<!--
var time=3;
var rtime=10000;
var image= new Array();
image[0]='img01.jpg';
image[1]='img02.jpg';
image[2]='img03.jpg';
var ii=0;
//-->
</SCRIPT>


→ JavaScript関数「imgchange()」を自作する
 
全ての変数が定義できたら、JavaScript関数「imgchange()」を自作します。「imageframe.」で始まる最初の4行は、前回の講座で解説したのとほとんど同じで、画像ファイル名をimage[ii]で指定している点（3行目）だけが異なっています。その後、変数iの値を1つ増やし、0〜2の間で巡回させます（iiが3になった場合は、if文で0に戻します）。あとは、setTimeoutを使って、rtimeの間隔で繰り返し「imgchange()」呼び出します。これで、残像を残しながら自動的に切り替わる画像が完成します。

なお、「filters.blendTrans」が有効となるのは、Internet Explorer 4.0以降だけです。Netscapeなどのブラウザでは、今回紹介するテクニックが正しく機能しないことに注意してください。
<SCRIPT language="JavaScript">
<!--
var time=3;
var rtime=10000;
var image= new Array();
image[0]='img01.jpg';
image[1]='img02.jpg';
image[2]='img03.jpg';
var ii=0;
function imgchange(){
imgframe.filters.blendTrans.Apply();
imgframe.filters.blendTrans.duration=time;
imgframe.src=image[ii];
imgframe.filters.blendTrans.Play();
ii=ii+1;
if (ii>2) ii=0;
t=setTimeout('imgchange()',rtime);
}
//-->
</SCRIPT>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��